<template>
  <view class="container">
    <!-- 视图：列表 -->
    <view v-if="view === 'list'">
      <view class="card">
        <u-cell-group :border="false">
          <u-cell
            v-for="(cfg, idx) in switchConfigs"
            :key="idx"
            :title="`开关${idx + 1}`"
            isLink
            :value="
              cfg.enable
                ? `${pad(cfg.hours)}:${pad(cfg.minutes)}:${pad(cfg.seconds)} ${
                    cfg.action
                  }`
                : ''
            "
            @click="openDetail(idx)"
            :border="false"
          />
        </u-cell-group>
      </view>
    </view>

    <!-- 视图：详情配置 -->
    <view v-else class="detail">
      <view class="section-header">开关{{ currentIndex + 1 }}</view>

      <view class="radio-row">
        <u-radio-group
          v-model="switchConfigs[currentIndex].action"
          placement="column"
        >
          <u-cell :border="false">
            <text slot="title">关</text>
            <u-radio
              slot="value"
              name="关"
              :checked="switchConfigs[currentIndex].action === '关'"
            />
          </u-cell>
          <u-cell :border="false">
            <text slot="title">开</text>
            <u-radio
              slot="value"
              name="开"
              :checked="switchConfigs[currentIndex].action === '开'"
            />
          </u-cell>
        </u-radio-group>
      </view>

      <view class="card" style="margin-top: 12rpx;">
        <view class="enable-row">
          <text>倒计时</text>
          <u-switch v-model="switchConfigs[currentIndex].enable" />
        </view>

        <!-- 内联滚轮选择器 -->
        <picker-view
          v-if="switchConfigs[currentIndex].enable"
          class="picker"
          indicator-style="height: 40px;"
          :value="pickerValue"
          @change="onPickerChange"
        >
          <picker-view-column>
            <view v-for="h in hoursList" :key="h" class="picker-item"
              >{{ h }} 时</view
            >
          </picker-view-column>
          <picker-view-column>
            <view v-for="m in minutesList" :key="m" class="picker-item"
              >{{ pad(m) }} 分</view
            >
          </picker-view-column>
          <picker-view-column>
            <view v-for="s in secondsList" :key="s" class="picker-item"
              >{{ pad(s) }} 秒</view
            >
          </picker-view-column>
        </picker-view>
      </view>

     <div class="picker-footer">
       <u-button type="primary" shape="circle" class="save-btn" @click="save">保存</u-button>
       <div style="margin-top: 12rpx;"></div>
      <u-button class="back-btn" shape="circle" plain @click="backToList">返回</u-button>
     </div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      view: "list",
      currentIndex: 0,
      switchConfigs: [
        { enable: false, action: "关", hours: 0, minutes: 0, seconds: 0 },
        { enable: false, action: "关", hours: 0, minutes: 0, seconds: 0 },
        { enable: false, action: "关", hours: 0, minutes: 0, seconds: 0 },
        { enable: false, action: "关", hours: 0, minutes: 0, seconds: 0 },
      ],
      hoursList: Array.from({ length: 24 }, (_, i) => i),
      minutesList: Array.from({ length: 60 }, (_, i) => i),
      secondsList: Array.from({ length: 60 }, (_, i) => i),
    };
  },
  computed: {
    pickerValue() {
      const cfg = this.switchConfigs[this.currentIndex];
      return [cfg.hours, cfg.minutes, cfg.seconds];
    },
  },
  methods: {
    openDetail(idx) {
      this.currentIndex = idx;
      this.view = "detail";
    },
    backToList() {
      this.view = "list";
    },
    onPickerChange(e) {
      const [h, m, s] = e.detail.value;
      const cfg = this.switchConfigs[this.currentIndex];
      cfg.hours = h;
      cfg.minutes = m;
      cfg.seconds = s;
      this.$set(this.switchConfigs, this.currentIndex, { ...cfg });
    },
    pad(n) {
      return String(n).padStart(2, "0");
    },
    save() {
      const cfg = this.switchConfigs[this.currentIndex];
      // 这里可接入后端接口，示例仅提示
      uni.showToast({
        title: `已保存：${this.pad(cfg.hours)}:${this.pad(
          cfg.minutes
        )}:${this.pad(cfg.seconds)} ${cfg.action}`,
        icon: "none",
      });
      this.view = "list";
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.container {
  height: 100%;
  background: #f6f7fb;
  padding: 16rpx;
}

.card {
  background: #fff;
  border-radius: 12rpx;
  padding: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.detail {
  padding: 16rpx;
}
.section-header {
  background: #f2f3f5;
  padding: 20rpx;
  font-size: 26rpx;
  color: #1e1f23;
}
.radio-row {
  background: #fff;
  padding: 12rpx 20rpx;
  margin-top: 16rpx;
}
.enable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 20rpx;
}
.picker {
  height: 260rpx;
  margin: 10rpx 20rpx 20rpx;
}
.picker-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-btn {
  margin: 40rpx 20rpx;
}
.back-btn {
  margin: 0 20rpx;
}

.picker-footer{
  // 固定到底部
  position: fixed;
  bottom: 60rpx;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx;
}
</style>
